<template>
  <div>
    <div class="fixHead">
      <div class="title">
        <span class="iconfont icon-jiantou" @click="$router.go(-1)"></span>
        <span class="icon-home" @click="$router.push('/')"></span>
        <h1>相关推文更新</h1>
      </div>
      <div style="height: 0.88rem;"></div>
    </div>
    <div class="art">
      <div class="title">
        <span>包含内容: 本社群原创和关联社群最新纳入合集</span>
        <span class="yellow" @click="showPicker = true"
          ><span>{{ chooseTxt }}</span
          ><span class="iconfont icon-jiantou"></span
        ></span>
      </div>
      <div class="list" v-if="list.length > 0">
        <div
          :class="[
            'item',
            'border',
            { checked: checkedIds.indexOf(item.id) != -1 }
          ]"
          @click.stop="choose(item)"
          v-for="(item, index) in list"
          :key="index"
        >
          <div class="cont">
            <div class="line1">{{ item.name }}</div>
            <div class="line2">
              <div class="left">
                <span v-if="item.yuanchuang == 1">本社群原创</span>
                <span v-else-if="item.yuanchuang == 2"
                  >原创社群:【某某某社群】</span
                >
              </div>
              <div class="right">
                <img src="../../assets/images/adver.jpg" />
                <span>麻小云</span>
              </div>
            </div>
          </div>
          <img class="img" src="../../assets/images/adver.jpg" />
          <div v-if="item.has" class="has">已收入</div>
        </div>
      </div>

      <button type="button" class="btnAdd">纳入我的社群合集</button>
    </div>

    <!--  -->
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { Popup } from "vant";
import { Picker } from "vant";
export default {
  name: "",
  components: {
    vanPicker: Picker,
    vanPopup: Popup
  },
  props: {},
  data: function() {
    return {
      showPicker: false,
      chooseTxt: "全部",
      list: [
        {
          id: 100,
          name:
            "标题标题标题标题标题标题标题标题标题标题标题题标题标题题标题标题题标题标题题标题标题",
          yuanchuang: 1,
          has: false
        },
        {
          id: 101,
          name: "标题标题标题标题标题2",
          yuanchuang: 2,
          has: true
        },
        {
          id: 102,
          name: "标题标题标题标题标题3",
          yuanchuang: 1,
          has: false
        }
      ],
      checkedIds: []
    };
  },
  mounted: function() {
    this.checkedIds = [];
    this.columns = ["全部", "本社群原创", "某某社群1", "某某社群2"];
  },
  methods: {
    choose(item) {
      let id = item.id;
      if (this.checkedIds.indexOf(id) != -1) {
        this.checkedIds.splice(this.checkedIds.indexOf(id), 1);
      } else {
        this.checkedIds.push(id);
      }
      console.log(this.checkedIds);
    },
    onConfirm(value, index) {
      console.log(`当前值：${value}, 当前索引：${index}`);
      this.showPicker = false;
      this.chooseTxt = value;
    }
  }
};
</script>

<style scoped>
.art .btnAdd {
  display: block;
  width: 100%;
  height: 0.98rem;
  background-color: #deaa8a;
  font-size: 0.32rem;
  color: #2a2631;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 10;
}

.art .title {
  width: 7.1rem;
  margin: 0 auto;
  color: #666;
  font-size: 0.24rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0;
  line-height: 0.32rem;
}
.art .title .yellow {
  color: #deaa8a;
  padding: 0 0.3rem 0 0.1rem;
  max-width: 3rem;
  position: relative;
}
.art .title .yellow .iconfont {
  font-size: 0.24rem;
  padding-left: 0.1rem;
  position: absolute;
  top: 0;
  right: 0;
}

.art .list {
  width: 7.1rem;
  margin: 0 auto;
  padding-bottom: 1.5rem;
}
.art .list .item {
  height: 2.18rem;
  background-color: #32303a;
  border-radius: 0.1rem;
  overflow: hidden;
  position: relative;
  margin-bottom: 0.2rem;
}
.art .list .item .img {
  display: block;
  width: 1.64rem;
  height: 2.18rem;
  border-radius: 0.1rem;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  object-fit: cover;
}
.art .list .item .has {
  display: block;
  width: 1.64rem;
  height: 0.48rem;
  background-color: rgba(0, 0, 0, 0.7);
  line-height: 0.48rem;
  text-align: center;
  font-size: 0.24rem;
  color: #999999;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  border-radius: 0 0 0.1rem 0.1rem;
}
.art .list .item .cont {
  width: 5.7rem;
  height: 2.18rem;
  border-radius: 0.1rem 0px 0px 0.1rem;
  padding: 0.3rem 0.54rem 0.3rem 0.3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.art .list .item.border .cont {
  border: solid 1px #514f57;
  background: url(../../assets/images/mkf/list_check.png) top left no-repeat;
  background-size: 0.54rem;
}
.art .list .item.checked .cont {
  border: solid 1px #deaa8a;
  background: url(../../assets/images/mkf/list_checked.png) top left no-repeat;
  background-size: 0.54rem;
}
.art .list .item .cont .line1 {
  width: 100%;
  font-size: 0.32rem;
  line-height: 0.48rem;
  height: 0.96rem;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}
.art .list .item .cont .line2 {
  height: 0.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.art .list .item .cont .line2 .left {
  display: flex;
  align-items: center;
}
.art .list .item .cont .line2 .left span {
  display: inline-block;
  padding: 0 0.11rem;
  height: 0.4rem;
  line-height: 0.4rem;
  border-radius: 0.04rem;
  background-color: rgba(255, 255, 255, 0.05);
  font-size: 0.24rem;
  color: #999999;
  max-width: 3rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.art .list .item .cont .line2 .right {
  display: flex;
  align-items: center;
}
.art .list .item .cont .line2 .right img {
  display: inline-block;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background-color: #f6f6f6;
}
.art .list .item .cont .line2 .right span {
  padding-left: 0.12rem;
  font-size: 0.24rem;
  color: #666666;
  display: inline-block;
  max-width: 1.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.art .list .del {
  display: block;
  width: 1.64rem;
  height: 2.18rem;
  background-color: #c93a09;
  border-radius: 0.1rem;
  font-size: 0.28rem;
  color: #ffffff;
}
</style>
<style>
.van-picker__title {
  color: #ffffff;
}
.van-picker {
  background-color: #32303a;
}
.van-picker__cancel,
.van-picker__confirm {
  color: #999999;
}
.van-picker__cancel:active,
.van-picker__confirm:active {
  background-color: rgba(255, 255, 255, 0.1);
}
.van-picker-column__item {
  color: rgba(255, 255, 255, 1);
}
.van-hairline--top-bottom::after {
  border-width: 0;
}
.van-picker__mask {
  background-image: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(rgba(50, 48, 58, 0.9)),
      to(rgba(50, 48, 58, 0.4))
    ),
    -webkit-gradient(linear, left bottom, left top, from(rgba(50, 48, 58, 0.9)), to(rgba(50, 48, 58, 0.4)));
  background-image: linear-gradient(
      180deg,
      rgba(50, 48, 58, 0.9),
      rgba(50, 48, 58, 0.4)
    ),
    linear-gradient(0deg, rgba(50, 48, 58, 0.9), rgba(50, 48, 58, 0.4));
}
.van-picker__frame {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
</style>
